<template>
	<div class="batch-box" v-loading="isUploadLoading" element-loading-text="试题识别中">
		<div class="basic-info">
			<h3>基本信息</h3>
			<select-groups-base
				ref="baseRef"
				:prop-list="['projectId','subjectId','chapter', 'knowledgePoint','questionDeveloperId']"
				:rules-prop-list="rulesPropList"
				label-width="80px"
				teacher-avlstatus="Y"
				:chapter-multiple="true"
				:knowledge-multiple="true"
				:disable-prop-list="disablePropList"
				:basic-info="basicDetail"
				@change="onBasicChange"
			/>
			<h3>标签信息</h3>
			<select-groups-tag
				ref="tagRef"
				label-width="80px"
				class="basic-select"
				:area-multiple="true"
				@change="onTagChange"
			/>
		</div>
		<div class="edit-content">
			<div class="edit-input m-r20">
				<div class="edit-area shrink-0">
					<p class="title">
						<img class="title-icon" src="@rc/assets/images/icon-edit.png" alt>
						编辑区
					</p>
					<div class="flex ai-center">
						<span class="tips">
							<span class="el-icon-warning" /> 注：仅支持导入“.docx”格式文档，下方编辑区可直接编辑试题内容
						</span>
						<el-button class="theme_font_color theme-border-color" size="mini" @click="download">下载模板</el-button>
						<el-button
							size="mini"
							class="theme_font_color theme-border-color"
							@click="isShowTestSpecificationDialog = true"
						>
							查看规范格式
						</el-button>
						<ve-upload-button
							ref="batchUploadBtn"
							class="upload-button"
							:suffixs="['docx']"
							:is-success-hide="false"
							:show-file-list="false"
							:disabled="isCanUpload"
							@onSuccess="onFileUploadSuccessBatch"
						>
							<el-button
								:disabled="isCanUpload"
								icon="el-icon-plus"
								type="primary"
								:loading="isUploadLoading"
								@click="resetUploadButton"
							>
								{{ uploadText }}
							</el-button>
						</ve-upload-button>
					</div>
				</div>
				<!-- 富文本编辑器 -->
				<editor
					class="shrink-0"
					ref="editorRef"
					:options="{height:548}"
					:placeholder="placeholderText"
					:value="editorHtml"
				/>
			</div>
			<div class="edit-result">
				<div class="edit-area">
					<div class="title">
						<img class="title-icon" src="@rc/assets/images/icon-test.png" alt>检验区
						<span class="sub-title">
							成功识别
							<span class="success">{{ rightNum }}</span>道试题，
							<span class="error">{{ recognizeNumber.errorNum }}</span>道题格式有误，
							<span class="error">{{ recognizeNumber.repeatNum }}</span>道试题内容重复
						</span>
						<el-button
							type="primary"
							@click="isShowRepeatDialog = true"
							size="mini"
							style="margin-left: 10px;"
							:disabled="recognizeNumber.repeatNum <= 0"
						>
							查看重复试题
						</el-button>
					</div>
					<div class="flex ai-center">
						<el-button
							class="theme_font_color theme-border-color"
							type="default"
							@click="handleClear"
						>
							清空内容
						</el-button>
						<el-button class="m-r10" type="primary" @click="handleIdentify">识别内容</el-button>
					</div>
				</div>
				<div class="content">
					<div class="placeholder-text" v-if="isShowPlaceholder">
						<p>1.识别错误的试题会显示在检验区，可根据红色框提示，修改错误部分</p>
						<p>2.识别成功的试题可通过【预览】查看</p>
					</div>
					<div class="details" v-else>
						<error-view :question-list="errorList" />
					</div>
				</div>
			</div>
		</div>
		<test-specification-dialog :show.sync="isShowTestSpecificationDialog" />
		<error-dialog :show.sync="isShowErrorDialog" :question-list="errorList" />
		<submit-dialog
			:show.sync="isShowSubmitDialog"
			:right-num="rightNum"
			:recognize-number="recognizeNumber"
			:is-loading="isSubmitLoading"
			:is-loading-edit="isSubmitLoadingEdit"
			@submit="onSubmit"
			@submit-edit="onSubmitEdit"
		/>
		<!-- 提交并补充信息成功弹窗 -->
		<success-dialog
			:show.sync="isShowSuccessDialog"
			@back="goBackList"
		/>
		<!-- 试卷包生成提示 -->
		<TestPaperPackageDialog ref="refTestPaperPackage" @back="goBackList" />
		<repeat-dialog
			:show.sync="isShowRepeatDialog"
			:data-list="questionRepeatMessageList"
		/>
		<repeat-process-dialog
			:show.sync="isShowRepeatProcessDialog"
			:data-list="questionRepeatList"
			@success="handleRepeatSuccess"
			:is-saving="isSubmitLoading || isSubmitLoadingEdit"
		/>
	</div>
</template>
<script src="./index.mjs"/>
<style scoped lang="less">
	.batch-box {
		padding: 0 0 10px;
        overflow:auto;
		.basic-info {
			background-color: #fff;
			padding: 16px 0 0 20px;
			margin-bottom: 12px;
			h3 {
				margin: 0 0 16px;
				font-size: 14px;
				font-weight: 700;
				text-align: left;
				color: #000000;
			}
		}
	}
	.edit-content {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		padding: 16px 20px 40px 20px;
		& > div {
            flex:1;
			display: flex;
			flex-direction: column;
		}
        .edit-input{
            min-width: 820px;
        }
        .edit-result{
            min-width: 470px;
        }
		.content {
			height: 548px;
			border: 1px solid #ccc;
			box-sizing: border-box;
			overflow-y: auto;
		}
	}
	.m-r20 {
		margin-right: 20px;
	}
	.m-r10 {
		margin-right: 10px;
	}
	.edit-area {
		margin: 0 0 11px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title {
            flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 14px;
			font-weight: 700;
			text-align: left;
			color: #000;
			.title-icon {
				width: 13px;
				height: 14px;
				margin-right: 8px;
			}
		}
		.sub-title {
			margin-left: 10px;
			font-size: 12px;
			color: #666666;
			.success {
				color: #1890ff;
				padding: 0 5px;
			}
			.error {
				color: #ff4436;
				padding: 0 5px;
			}
		}
	}
	.upload-button {
		margin-left: 10px;
	}
	.tips {
        flex-shrink: 0;
		display: inline-block;
		padding: 0 12px;
		font-size: 12px;
		color: #666666;
		background-color: #fffbe6;
		border: 1px solid #ffe58f;
		height: 28px;
		display: flex;
		align-items: center;
		margin-right: 9px;
		.el-icon-warning {
			color: #ffa613;
			font-size: 12px;
			margin-right: 6px;
		}
	}
	/deep/.tox .tox-edit-area {
		font-size: 14px;
		p {
			line-height: 24px;
		}
	}
	.placeholder-text {
		padding: 10px;
		& > p {
			line-height: 24px;
			color: rgb(136, 136, 136);
		}
	}
    .shrink-0{
        flex-shrink:0
    }
</style>
